<template>
  <div class="channel-edit">
    <div class="title">
      <div class="text">我的频道</div>
      <van-button type="danger" plain round size="mini" @click="isEdit = !isEdit">{{ isEdit ? '完成' : '编辑' }}</van-button>
    </div>
    <van-grid>
      <van-grid-item :icon="isEdit && !fixedChannels.includes(item.id) ? 'close' : ''" :text="item.name" v-for="(item, index) in myChannels" :key="index" @click="onChannelClick(item, index)">
        <span slot="text" :style="{ color: index === active ? 'red' : '#222' }">{{ item.name }}</span>
      </van-grid-item>
    </van-grid>

    <div class="title">
      <div class="text">频道推荐</div>
    </div>
    <van-grid>
      <van-grid-item icon="plus" :text="item.name" v-for="(item, index) in recommendChannels" :key="index" @click="onAddChannel(item)" />
    </van-grid>
  </div>
</template>

<script>
import {
  getAllChannels,
  addUserChannel,
  deleteUserChannel
} from '@/api/article'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'
export default {
  name: 'ChannelEdit',
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allChannels: [], // 所有频道的列表
      isEdit: false, // 编辑状态
      fixedChannels: [0] // 不可删除的频道项
    }
  },
  created () {
    this.loadChannels()
  },
  methods: {
    async loadChannels () {
      try {
        const { data: res } = await getAllChannels()
        this.allChannels = res.data.channels
        console.log(this.allChannels)
      } catch (error) {
        this.$toast.fail('获取频道数据失败')
      }
    },
    // 添加频道
    async onAddChannel (item) {
      this.myChannels.push(item)
      if (this.user) {
        // 已登录-->接口
        try {
          await addUserChannel({
            channels: [{
              id: item.id,
              seq: this.myChannels.length
            }]
          })
        } catch (err) {
          this.$toast.fail('添加频道失败')
        }
      } else {
        // 未登录-->本地存储
        setItem('TOUTIAO_CHANNELS', this.myChannels)
      }
    },
    async onChannelClick (channel, index) {
      // console.log(channel, index)
      if (this.isEdit) {
        // 删除频道
        if (this.fixedChannels.includes(index)) return // 推荐频道不能删除
        if (index <= this.active) {
          this.$emit('update-active', this.active - 1, true)
        }
        this.myChannels.splice(index, 1)
        if (this.user) {
          // 已登录
          try {
            await deleteUserChannel(channel.id)
          } catch (err) {
            this.$toast.fail('删除频道同步失败')
          }
        } else {
          // 未登录
        }
      } else {
        // 切换频道
        this.$emit('update-active', index)
      }
    }
  },
  computed: {
    ...mapState(['user']),
    recommendChannels () {
      // 方法1
      // var arr = []
      // this.allChannels.forEach(item => {
      //   var bool = this.myChannels.some(item1 => item1.id === item.id)
      //   if (!bool) {
      //     arr.push(item)
      //   }
      // })
      // return arr
      // 方法2
      return this.allChannels.filter(item => {
        return !this.myChannels.some(item1 => item1.id === item.id)
      })
    }

  }
}
</script>

<style scoped lang="less">
.channel-edit {
  .title {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    margin-top: 100px;
    margin-bottom: 40px;
    .text {
      font-size: 32px;
    }
    .van-button {
      width: 104px;
      height: 48px;
    }
  }
  /deep/ .van-grid-item__content {
    width: 160px;
    height: 86px;
    background-color: #f4f5f6;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    .van-icon-plus {
      font-size: 24px;
    }
    span {
      margin-top: 0px;
      font-size: 28px;
      color: #222222;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    position: relative;
    .van-icon-close {
      position: absolute;
      right: -10px;
      top: -10px;
      font-size: 36px;
      color: #ccc;
    }
  }
  /deep/ .van-grid {
    margin-left: 20px;
    .van-grid-item__text {
      font-size: 28px;
    }
  }
}
</style>
